<template>
  <div>
    <div style="text-align: center">
      <h3>{{ title }}</h3>
    </div>

    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="单据明细" name="info">
        <detail-info :dataInfo="form"></detail-info>
      </el-tab-pane>
      <el-tab-pane label="流程图" name="image">
        <el-image :src="url" style="winth: 100%"></el-image>
      </el-tab-pane>
      <el-tab-pane label="流转记录" name="record">
        <detail-workflow :dataInfo="form" @fetch-data="setTitle"></detail-workflow>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import { serviceURL, baseURL } from '@/config'
  import DetailInfo from './Detail'
  import DetailWorkflow from './Workflow'

  export default {
    name: 'SalesOrderHistory',
    components: { DetailInfo, DetailWorkflow },
    props: {
      dataInfo: {
        type: Object,
        default: () => {
          return {}
        },
      },
    },
    data() {
      return {
        activeName: 'info',
        title: '',
        url: '#',
        form: {},
        orderDetail: [],
      }
    },
    created() {
      this.showData(this.$props.dataInfo)
    },
    methods: {
      setTitle(data) {
        this.title = data
      },
      showData(row) {
        this.title = row.businessKey
        this.form = Object.assign({}, row)
        this.url = `${window.origin}${baseURL}/wfModel/taskImage/${row.businessKey}/${row.category}?ACCESS-TOKEN=${
          this.$store.getters['user/accessToken']
        }&ts=${new Date().getTime()}`
      },
    },
  }
</script>

<style scoped>
  .dialog /deep/ .el-dialog__body {
    padding-top: 0 !important;
  }
</style>
